<template>
  <div id="app" style="margin-bottom: 50px">
    <div class="box1">
      <!-- navbar-头部 -->
      <van-nav-bar
        :title="homeTitle"
        @click-left="onClickLeft"
        v-show="isShowNavBar"
        :left-arrow="BackArrow"
      />
      <keep-alive include="myGoodsList,Home">
        <!-- 路由匹配的容器 -->
        <router-view></router-view>
      </keep-alive>
      <!-- tabbar-底部 -->
      <van-tabbar v-show="isShowTabBar" v-model="active" :active-color="color">
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item
          icon="shopping-cart-o"
          to="/shop"
          :badge="$store.getters.GetTotalShoppingCarts"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item icon="user-o" to="/users">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      color: "skyblue",
      homeTitle: "我的标题",
      BackArrow: true, //箭头
      isShowNavBar: false, //头部隐藏
      isShowTabBar: true, //底部隐藏
      isOnLine: navigator.online, //网络状态
      // home刷新页面↓
      // count: 0,
      // isLoading: false,
    };
  },

  watch: {
    $route: {
      handler: function (route) {
        console.log("监听了监听了");
        console.log("app-watch-route", route);
        if (route.meta) {
          let { homeTitle, homePage, isShowNavBar } = route.meta;
          this.homeTitle = homeTitle;
          this.BackArrow = homePage ? false : true;
          this.isShowTabBar = homePage ? true : false;
          //!! 两个等号是吧变量转换为布尔型
          this.isShowNavBar = isShowNavBar ? true : false;
        }
        // 设置底部tabbar默认高亮显示
        const activeMap = {
          Home: 0,
          Shop: 1,
          Users: 2,
        };
        this.active = activeMap[route.name];
      },
      immediate: true,
    },
    // watch监听网络的状态
    isOnLine() {
      this.isOnLine === false && this.$toast.fail("没网还想上网");
      this.isOnLine === true && this.$toast.success("网络已经连接");
    },
  },
  methods: {
    onClickLeft() {
      //返回到腹肌页面
      console.log(11111);
      this.$router.back();
    },
    updateNetwork(e) {
      this.isOnLine = e.type === "online" ? true : false;
    },
    //home刷新页面
    //  onRefresh() {
    //   setTimeout(() => {
    //     Toast('刷新成功');
    //     this.isLoading = false;
    //     this.count++;
    //   }, 1000);
    // },
  },
  mounted() {
    //  添加监听事件
    window.addEventListener("online", this.updateNetwork);
    window.addEventListener("offline", this.updateNetwork);
  },
};
</script>

<style lang="scss">
// 导入公共的scss文件
@import "@/assets/scss/common.scss";
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
#app {
  min-width: 320px;
  max-width: 750px;
  margin: auto;
  font-family: "楷体";
  .van-nav-bar {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .van-tabbar {
    min-width: 320px;
    max-width: 750px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
